import Base from "../Base.js";
import moviesApi from "../../api/movies.js";


export default class extends Base {
    handle() {
        const _this = this
        layui.table.on('tool(movie-table)', async function (obj) {
            //查找与被点击的更新的_id相对应的数据
            const data = obj.data;
            moviesApi.setStorage(data)//把获取到的数据放入本地存储
            switch (obj.event) {
                case "check"://详情
                    location.hash = "/info/movies-details";
                    break;
                case "edit"://编辑
                    location.hash = "/info/movies-edit";
                    break;
                case "del"://删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                    await moviesApi.removeMovie({
                        _id: data._id
                    });
                    break;
            }

        });
        // 搜索
        $(".demoTable .layui-btn").on("click", async function () {
            let data = await moviesApi.get();
            if ($("#demoReload").val() != "") {
                data = data.filter(item => item.cname.match($("#demoReload").val()));
            }
            _this.renrender(data);
        })
    };
    async movies() {
        const data = await moviesApi.get();
        this.renrender(data);
    };
    mounted() {
        this.movies()
    }
    //渲染电影信息列表
    renrender(data) {
        layui.use("table", function () {
            layui.table.render({
                elem: "#movie-table",
                data: data,
                toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }],
                page: true,
                limit: 10,
                cols: [[
                    { type: 'checkbox', fixed: 'left' }
                    , { field: '_id', title: '序号', sort: true, align: 'center' }
                    , { field: 'cname', width: 100, title: '电影名', align: 'center' }
                    , { field: 'type', title: '电影类型', align: 'center' }
                    , { field: 'upDate', title: '上映时间', align: 'center' }
                    , { field: 'area', title: '首映地区', align: 'center' }
                    , { field: 'time', title: '电影时长', align: 'center' }
                    , { field: 'actor', title: '演员', align: 'center' }
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center' }
                ]]
            });
        })
    }
    //初始化表格
    render() {
        this.el.html(`
        <div class="demoTable">
        搜索：
        <div class="layui-inline"><input class="layui-input" name="id" id="demoReload" autocomplete="off"></div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
        <table class="layui-hide adminMovies-list" id="movie-table" lay-filter="movie-table"> </table>
        <script type="text/html" id="barDemo">
        <a  href="#/info/movies-edit" class="layui-btn layui-btn-xs" data-method="confirmTrans"  lay-event="edit" style="width: 30px; ">编辑</a>
        <a  href="#/info/movies-details" class="layui-btn layui-btn-xs  data-method="offset"   lay-event ="check"  style="width: 30px;">详情</a>
        <a  href="#" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="width: 30px;">删除</a>
        </script>
        `);
        this.renrender();
        $(".demoTable").css({
            color: "#fff",
            fontSize: "18px"
        })
        $("table").css({
            opacity: 0.8
        })
        $(".layui-input").css({
            height: "30px",
        });
        $(".layui-suo").css({
            height: "30px",
            lineHeight: "30px"
        })
    };
}